<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
		<meta name="renderer" content="webkit">
		<title>CSS3 响应式纵向滚屏翻页，支持键盘，鼠标操作</title>
		<style type="text/css">
			body {
				color: #222;
				-webkit-text-size-adjust: none;
			}
			
			body,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			hr,
			p,
			blockquote,
			dl,
			dt,
			dd,
			ul,
			ol,
			li,
			pre,
			form,
			fieldset,
			legend,
			button,
			input,
			textarea,
			th,
			td,
			iframe {
				margin: 0;
				padding: 0;
			}
			
			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
				font-size: 100%;
			}
			
			body,
			button,
			input,
			select,
			textarea {
				font-family: Tahoma, Arial, Roboto, ”Droid Sans”, ”Helvetica Neue”, ”Droid Sans Fallback”, ”Heiti SC”, sans-self;
				font-size: 62.5%;
				line-height: 1.5;
			}
			
			ol,
			ul {
				list-style: none;
			}
			
			html,
			body {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			
			#pageContain {
				overflow: hidden;
			}
			
			.page {
				display: none;
				width: 100%;
				height: 100%;
				overflow: hidden;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.contain {
				width: 100%;
				height: 100%;
				display: none;
				position: relative;
				z-index: 0;
			}
			
			.current .contain,
			.slide .contain {
				display: block;
			}
			
			.current {
				display: block;
				z-index: 1;
			}
			
			.slide {
				display: block;
				z-index: 2;
			}
			
			.swipe {
				display: block;
				z-index: 3;
				transition-duration: 0ms !important;
				-webkit-transition-duration: 0ms !important;
			}
			
			.page1 {
				background: #37c1e3;
			}
			
			.page2 {
				background: #009922;
			}
			
			.page3 {
				background: #992211;
			}
			
			.page4 {
				background: #ff00ff;
			}
			
			.page5 {
				background: #00ff00;
			}
			
			.page6 {
				background: #22ffff;
			}
			
			#navBar {
				z-index: 3;
				position: absolute;
				top: 10%;
				right: 3%;
			}
			
			#navBar .active {
				background: #ccc;
			}
			
			#navBar li {
				cursor: pointer;
				margin-bottom: 10px;
				transition: all .7s ease;
				border-radius: 50%;
				line-height: 40px;
				text-align: center;
				width: 40px;
				height: 40px;
			}
			
			p {
				width: 200px;
				height: 100px;
				color: #fff;
				text-align: center;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -100px;
				margin-top: -50px;
				opacity: 1;
				transition: all .8s ease;
				transform-origin: 50% 50%;
			}
			
			.step1 p {
				transform: translate(0, -50px);
				-webkit-transform: translate(0, -50px);
			}
			
			.step2 p {
				opacity: 0;
				transform: scale(2);
				-webkit-transform: scale(2);
			}
			
			.step3 p {
				transform: scale(1);
				-webkit-transform: scale(1) opacity: 1;
			}
			
			.step4 p {
				-webkit-transform: rotate(360deg) translate(0, -200px) scale(.3);
				transform: rotate(360deg) translate(0, -200px) scale(.3);
				opacity: 0;
			}
			
			.arrow {
				opacity: 1;
				animation: arrow 3s cubic-bezier(0.5, 0, 0.1, 1) infinite;
				-webkit-animation: arrow 3s cubic-bezier(0.5, 0, 0.1, 1) infinite;
				transform: rotate(-90deg);
				-webkit-transform: rotate(-90deg);
				position: absolute;
				bottom: 10px;
				left: 50%;
				margin-left: -20px;
				width: 40px;
				height: 40px;
				border-radius: 100%;
				-webkit-border-radius: 100%;
				line-height: 40px;
				text-align: center;
				font-size: 20px;
				color: #fff;
				border: 1px solid #fff;
				cursor: pointer;
				overflow: hidden;
				z-index: 999;
			}
			
			.arrow:hover {
				animation-play-state: paused;
				-webkit-animation-play-state: paused;
			}
			
			@keyframes arrow {
				%0,
				%100 {
					bottom: 10px;
					opacity: 1;
				}
				50% {
					bottom: 50px;
					opacity: .5
				}
			}
			
			@-webkit-keyframes arrow {
				%0,
				%100 {
					bottom: 10px;
					opacity: 1;
				}
				50% {
					bottom: 50px;
					opacity: .5
				}
			}
		</style>
		<!--[if lte IE 8]>
	<style type="text/css">
		html,body{width:100%; height:100%; overflow:scroll}
		.page-btn{display:none;}
	</style>
	<![endif]-->
	</head>

	<body>
		<div id="pageContain">
			<div class="page page1 current">
				<div class="contain">
					11111
					<!-- your own code here-->
				</div>
			</div>
			<!-- ect.. -->
			<div class="page page2">
				<div class="contain">
					2222
					<!-- your own code here-->
				</div>
			</div>
			<div class="page page3">
				<div class="contain">
					333
					<!-- your own code here-->
				</div>
			</div>
			<div class="page page4">
				<div class="contain">
					444
					<!-- your own code here-->
				</div>
			</div>
		</div>

		<div class="arrow" id="arrow">&laquo;</div>
		<div id="audio" style="z-index: 999;">music</div>
		<script src="__TMPL__Public/js/fullPage.min.js"></script>
		<script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"></script>
		<script src="__TMPL__Public/js/jquery.jplayer.min.js"></script>
		<script type="text/javascript">
			var runPage;
			var index = 0;
			runPage = new FullPage({
				id: 'pageContain', // id of contain
				slideTime: 800, // time of slide
				continuous: true, // create an infinite feel with no endpoints
				effect: { // slide effect
					transform: {
						translate: 'Y', // 'X'|'Y'|'XY'|'none'
						scale: [.1, 1], // [scalefrom, scaleto]
						rotate: [0, 0] // [rotatefrom, rotateto]
					},
					opacity: [0, 1] // [opacityfrom, opacityto]
				},
				mode: 'wheel,touch', // mode of fullpage
				easing: 'ease' // easing('ease','ease-in','ease-in-out' or use cubic-bezier like [.33, 1.81, 1, 1];
					//  ,onSwipeStart : function(index, thisPage) {   // callback before pageChange
					//    return 'stop';
					//  }
					//  ,beforeChange : function(index, thisPage) {   // callback before pageChange
					//    return 'stop';
					//  }
					//  ,callback : function(index, thisPage) {       // callback when pageChange
					//    alert(index);
					//  };
			});
			var arrow = $(".arrow");
			arrow.click(function() {
				index++;
				if (index % 2) {
					$("#audio").jPlayer("pause");
				} else {
					$("#audio").jPlayer("play");
				}
			});
			$("#audio").jPlayer({
				ready: function() {
					$(this).jPlayer("setMedia", {
						mp3: "http://120.52.72.41/www.jplayer.org/c3pr90ntcsf0/audio/mp3/Miaow-04-Lismore.mp3" // Defines the mp3 url
					}).jPlayer("play");
				},
			});
		</script>
	</body>

</html>